<template>
  <div>
    <LoadingView v-if="showLoading" />
    <div class="store" v-else>
      <div class="store-bgc" ref="scroll">
        <div class="header-search-position">
          <div class="header-search" :class="{ bgc: topBarFixed }">
            <img
              @click="$router.back()"
              v-lazy="
                `https://image-mall.gxptkc.com/m/resources/store/white_arrow_l.png`
              "
              alt=""
              v-if="!topBarFixed"
            />
            <img
              v-if="topBarFixed"
              v-lazy="
                `https://image-mall.gxptkc.com/m/resources/store/to_right.png`
              "
              alt=""
              :style="{ width: '17rem', height: '17rem' }"
            />
            <div class="search" :class="{ border: topBarFixed }">
              <img
                src="https://image-mall.gxptkc.com/m/resources/store/shop_list_search.png"
                alt=""
              />
              <input type="text" placeholder="搜索店铺内商品" />
            </div>
            <div class="msg">
              <img
                @click="showElse = true"
                src="https://image-mall.gxptkc.com/m/resources/store/more1.png"
                alt=""
                v-if="!topBarFixed"
              />
              <img
                v-if="topBarFixed"
                src="https://image-mall.gxptkc.com/m/resources/store/more_black.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="else" v-if="showElse" @click="showElse = false">
          <ul>
            <li @click="$router.push('/')">
              <svg
                t="1671723450822"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2206"
                width="200"
                height="200"
              >
                <path
                  d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z"
                  p-id="2207"
                ></path>
              </svg>
              <span>首页</span>
            </li>
            <li>
              <svg
                t="1671723507525"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3174"
                width="200"
                height="200"
              >
                <path
                  d="M67 490.3h410.3V80H67v410.3z m61.6-348.7h287.2v287.2H128.6V141.6zM664.3 65.9c-64.2 0-116.4 52.2-116.4 116.4v293.9h293.9c64.2 0 116.4-52.2 116.4-116.4V65.9H664.3z m232.3 293.9c0 30.3-24.6 54.9-54.9 54.9H609.4V182.3c0-30.3 24.6-54.9 54.9-54.9h232.3v232.4zM67 959.6h410.3V549.2H67v410.4z m61.6-348.8h287.2V898H128.6V610.8zM547.9 959.6h410.3V549.2H547.9v410.4z m61.5-348.8h287.2V898H609.4V610.8z"
                  fill="#515151"
                  p-id="3175"
                ></path>
              </svg>
              <span>分类</span>
            </li>
            <li>
              <svg
                t="1671723548297"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4162"
                width="200"
                height="200"
              >
                <path
                  d="M842.7781 825.197188c0 11.227716-9.096169 20.315698-20.315698 20.315698L131.709229 845.512886c-11.219529 0-20.315698-9.087982-20.315698-20.315698L111.393531 337.605088c0-11.200086 9.096169-20.308535 20.315698-20.308535l203.163119 0 0-40.640606L111.393531 276.655947c-22.440082 0-40.633443 18.203594-40.633443 40.640606l0 528.216333c0 22.448268 18.193361 40.631396 40.633443 40.631396L842.7781 886.144282c22.441105 0 40.634466-18.184151 40.634466-40.631396L883.412566 662.665465 842.7781 662.665465 842.7781 825.197188zM950.519963 315.047326 763.765559 128.290875l-28.739555 28.728298 139.974985 139.951449-154.120147 0 0 1.360997C482.572272 312.140113 292.06745 485.590514 275.600407 703.307094l40.652885 0C332.69066 507.940544 505.090125 352.495216 720.880843 338.952782l0-1.347694 154.109913 0L735.026004 477.574956l28.739555 28.728298 186.754405-186.754405-2.25025-2.25332L950.519963 315.047326z"
                  fill="#5D5D5D"
                  p-id="4163"
                ></path>
              </svg>
              <span>分享</span>
            </li>
            <li @click="$router.push('cart')">
              <svg
                t="1671723585781"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5139"
                width="200"
                height="200"
              >
                <path
                  d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
                  fill="#575B66"
                  p-id="5140"
                ></path>
                <path
                  d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
                  fill="#575B66"
                  p-id="5141"
                ></path>
                <path
                  d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
                  fill="#575B66"
                  p-id="5142"
                ></path>
                <path
                  d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
                  fill="#575B66"
                  p-id="5143"
                ></path>
              </svg>
              <span>购物车</span>
            </li>
            <li @click="$router.push('/own')">
              <svg
                t="1671723625622"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6091"
                width="200"
                height="200"
              >
                <path
                  d="M634.65472 581.91872c92.89728-45.48608 157.02016-140.65664 157.02016-251.04384C791.67488 176.41472 666.46016 51.2 512 51.2c-154.46016 0-279.67488 125.21472-279.67488 279.67488 0 110.3872 64.12288 205.57824 157.02016 251.04384-154.15296 49.37728-270.25408 188.7232-282.46016 357.56032-1.2288 17.12128 11.63264 31.98976 28.75392 33.23904 17.24416 1.20832 31.98976-11.65312 33.23904-28.75392C181.80096 764.90752 332.53376 624.64 512 624.64s330.19904 140.26752 343.1424 319.32416c1.18784 16.36352 14.82752 28.83584 30.96576 28.83584 0.75776 0 1.51552-0.02048 2.27328-0.08192 17.12128-1.2288 29.98272-16.11776 28.75392-33.23904C904.92928 770.64192 788.82816 631.296 634.65472 581.91872zM294.48192 330.87488c0-120.13568 97.3824-217.51808 217.51808-217.51808 120.13568 0 217.51808 97.3824 217.51808 217.51808S632.13568 548.39296 512 548.39296C391.86432 548.39296 294.48192 451.01056 294.48192 330.87488z"
                  fill="#515151"
                  p-id="6092"
                ></path>
              </svg>
              <span> 个人中心</span>
            </li>
          </ul>
        </div>
        <div class="store-msg">
          <div class="msg-left">
            <img
              :src="`https://image-mall.gxptkc.com/${storeMsg?.storeLogo}`"
              alt=""
            />
            <div class="msg-content">
              <div class="title">
                <span
                  @click="
                    $router.push({
                      path: '/detail',
                      query: { storeid: $route.query.storeid },
                    })
                  "
                  >{{ storeMsg?.storeName }}</span
                >
                <img
                  src="https://image-mall.gxptkc.com/m/resources/store/rightdown.png"
                  alt=""
                />
                <span>自营</span>
              </div>
              <div class="popularity">
                <img
                  src="https://image-mall.gxptkc.com/m/resources/store/renqizhi.png"
                  alt=""
                />
                <span>人气：</span>
                <span>{{ storeMsg?.followNumber }}</span>
              </div>
            </div>
          </div>
          <div class="msg-right">
            <span
              v-if="num == 1"
              @click="toCollectionStore(0)"
              class="collected"
              >已收藏</span
            >
            <span v-else @click="toCollectionStore(1)">收藏</span>
          </div>
        </div>
        <div class="goods-classify">
          <ul class="list">
            <li @click="clickAllGoods">
              <img
                v-if="imgLight == 1"
                src="https://image-mall.gxptkc.com/m/resources/store/shangpin_sel.png"
                alt=""
              />
              <img
                v-else
                src="https://image-mall.gxptkc.com/m/resources/store/shangpin.png"
                alt=""
              />
              <span>全部商品</span>
            </li>
            <li @click="clickNewGoods">
              <img
                v-if="imgLight == 2"
                src="	https://image-mall.gxptkc.com/m/resources/store/shangxin_sel.png"
                alt=""
              />
              <img
                v-else
                src="https://image-mall.gxptkc.com/m/resources/store/iconfont37newtag.png"
                alt=""
              />
              <span>商品上新</span>
            </li>
            <li @click="clickCoupon">
              <img
                v-if="imgLight == 3"
                src="https://image-mall.gxptkc.com/m/resources/store/youhuiquan.png"
                alt=""
              />
              <img
                v-else
                src="https://image-mall.gxptkc.com/m/resources/store/youhuiquan1.png"
                alt=""
              />
              <span>优惠券</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="goods-option" v-if="!showCategoryGoods">
        <div
          class="rank"
          v-if="imgLight == 1"
          :class="{ position: topBarFixed }"
        >
          <ul>
            <li>
              <span :class="{ active: sore == 0 }" @click="sore = 0">综合</span>
            </li>
            <li>
              <span :class="{ active: sore == 1 }" @click="sore = 1">销量</span>
            </li>
            <li>
              <span
                :class="{ active: sore == 3 || sore == 4 }"
                @click="clickPrice"
                >价格</span
              >
            </li>
            <li>
              <span :class="{ active: sore == 5 }" @click="sore = 5">人气</span>
            </li>
          </ul>
          <div class="toggle">
            <svg
              @click="isshow = false"
              v-if="isshow"
              t="1671425379452"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="18998"
              width="200"
              height="200"
            >
              <path
                d="M51.2 563.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
                p-id="18999"
                fill="#2c2c2c"
              ></path>
              <path
                d="M563.2 51.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
                p-id="19000"
                fill="#2c2c2c"
              ></path>
              <path
                d="M563.2 563.2m30.72 0l348.16 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-348.16 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
                fill="#2c2c2c"
                p-id="19001"
              ></path>
              <path
                d="M563.2 737.28m30.72 0l266.24 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-266.24 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
                fill="#2c2c2c"
                p-id="19002"
              ></path>
              <path
                d="M563.2 911.36m30.72 0l184.32 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-184.32 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
                fill="#2c2c2c"
                p-id="19003"
              ></path>
              <path
                d="M51.2 51.2m51.2 0l307.2 0q51.2 0 51.2 51.2l0 307.2q0 51.2-51.2 51.2l-307.2 0q-51.2 0-51.2-51.2l0-307.2q0-51.2 51.2-51.2Z"
                p-id="19004"
                fill="#2c2c2c"
              ></path>
            </svg>
            <svg
              @click="isshow = true"
              v-else
              t="1671424907524"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8078"
              width="200"
              height="200"
            >
              <path
                d="M127.99 127.97h320v320h-320zM575.99 127.97h384v128h-384zM575.99 319.97h384v128h-384zM575.99 575.97h384v128h-384zM575.99 767.97h384v128h-384zM127.99 575.97h320v320h-320z"
                fill="#231815"
                p-id="8079"
              ></path>
            </svg>
          </div>
        </div>
        <div class="goods" v-if="showCategoryGoods == false">
          <!-- 商品上新的商品 -->
          <ul class="new-goods-list" v-if="imgLight == 2">
            <li v-for="(i, index) in newGoodsList" :key="index">
              <div class="title">
                <span></span>
                <p>{{ i.onLineTime }}上新</p>
                <span></span>
              </div>
              <div class="goods-item">
                <GoodsListView
                  v-for="item in i.goodsVOList"
                  :key="item.goodsId"
                  :item="item"
                />
              </div>
            </li>
          </ul>
          <!-- 全部商品 -->

          <div v-if="imgLight == 1">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :offset="1"
              :immediate-check="true"
            >
              <div class="scrool-style">
                <GoodsListView
                  v-for="(item, index) in storeGoods"
                  :key="index"
                  :item="item"
                />
              </div>
            </van-list>
          </div>
          <!-- 优惠券 -->
          <div class="coupon" v-if="imgLight == 3">
            <CouponView />
          </div>
        </div>
      </div>
      <div class="store-action">
        <ul class="action">
          <li @click="clickIndex">
            <img
              v-if="action == 0"
              src="https://image-mall.gxptkc.com/m/resources/store/bar1_sel.png"
              alt=""
            />
            <img
              v-else
              src="https://image-mall.gxptkc.com/m/resources/store/bar1.png"
              alt=""
            />
            <span :class="{ active: action == 0 }">首页</span>
          </li>
          <li @click="clickGoods">
            <img
              v-if="action == 1"
              src="https://image-mall.gxptkc.com/m/resources/store/dianpu_sel.png"
              alt=""
            />
            <img
              v-else
              src="https://image-mall.gxptkc.com/m/resources/store/dianpu.png"
              alt=""
            />
            <span :class="{ active: action == 1 }">商品</span>
          </li>
          <li @click="clickClassify">
            <img
              v-if="action == 2"
              src="		https://image-mall.gxptkc.com/m/resources/store/fenlei_sel.png"
              alt=""
            />
            <img
              v-else
              src="	https://image-mall.gxptkc.com/m/resources/store/fenlei.png"
              alt=""
            />
            <span :class="{ active: action == 2 }">分类</span>
          </li>
          <li
            @click="
              $router.push({
                path: '/chat',
                query: { storeid: $route.query.storeid },
              })
            "
          >
            <img
              src="	https://image-mall.gxptkc.com/m/resources/chat/chat_service.png"
              alt=""
            />
            <span>客服</span>
          </li>
        </ul>
      </div>
      <div class="store-classift-empty" v-if="showCategoryGoods">
        <p>暂无商品分类</p>
      </div>
      <div class="empty" :style="{ height: '47rem' }"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import qs from "qs";
import GoodsListView from "@/components/GoodsListView.vue";
import CouponView from "@/components/CouponView.vue";
import LoadingView from "@/components/LoadingView.vue";
import { List } from "vant";

Vue.use(List);
Vue.use(Toast);
export default {
  components: { GoodsListView, CouponView, LoadingView },
  data() {
    return {
      storeMsg: null,
      storeGoods: [],
      categoryList: null,
      newGoodsList: null,
      imgLight: 1,
      sore: 0,
      isshow: false,
      action: 0,
      showCategoryGoods: false,
      showElse: false,
      myInfo: null,
      collectionNum: null,
      num: 0,
      showLoading: true,
      //触底加载
      loading: false,
      finished: false,
      current: 1,

      //
      topBarFixed: false,

      isloadinggoods: false,
    };
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    let res = await this.axios({
      method: "GET",
      url: `https://m-mall.gxptkc.com/v3/seller/front/store/detail?storeId=${this.$route.query.storeid}`,
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
    let goodsRes = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?current=1&pageSize=10&sort=0&storeId=${this.$route.query.storeid}`
    );

    this.storeMsg = res.data.data;
    this.storeGoods = goodsRes.data.data.list;
    this.collectionNum = this.storeMsg.isFollow;

    if (this.collectionNum == "true") {
      this.num = 1;
    } else if (this.collectionNum == "false") {
      this.num = 0;
    }
    this.showLoading = false;
    //验证身份信息
    this.myInfo = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    document.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    async sore(newVal) {
      newVal;
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?current=1&pageSize=10&sort=${this.sore}&storeId=${this.$route.query.storeid}`
      );
      this.storeGoods = res.data.data.list;
    },
  },
  methods: {
    handleScroll() {
      if (document.documentElement.scrollTop > 200) {
        this.topBarFixed = true;
      } else {
        this.topBarFixed = false;
      }
    },
    clickGoods() {
      this.action = 1;
      document.documentElement.scrollTop = 201;
    },

    async onLoad() {
      if (!this.isloadinggoods) {
        this.current += 1;

        this.isloadinggoods = true;
        // 数据全部加载完成
        let goodsRes = await this.axios.get(
          `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?current=${this.current}&pageSize=10&sort=0&storeId=${this.$route.query.storeid}`
        );

        this.storeGoods = [...this.storeGoods, ...goodsRes.data.data.list];
        this.loading = false;
        this.isloadinggoods = false;
        if (this.storeGoods.length >= goodsRes.data.data.pagination.total) {
          this.finished = true;
        }
      }
    },
    async toCollectionStore(type) {
      if (this.myInfo.data.msg == "成功") {
        let type1 = null;
        type1 = type;

        let res = await this.axios({
          method: "POST",
          url: "https://m-mall.gxptkc.com/v3/member/front/followStore/edit",
          headers: {
            authorization: `Bearer ${this.token}`,
            "content-type": "application/x-www-form-urlencoded",
          },
          data: qs.stringify({
            storeIds: this.$route.query.storeid,
            isCollect: type1,
          }),
        });

        this.collectionNum = type;
        this.num = type;
        Toast(res.data.msg);
      } else {
        Toast(this.myInfo.data.msg);
      }
    },

    async clickClassify() {
      //点击分类
      this.action = 2;
      let categoryRes = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/seller/front/store/storeCategory?storeId=${this.$route.query.storeid}`
      );
      this.categoryList = categoryRes?.data?.data?.list;
      if (this.categoryList && this.categoryList.length > 0) {
        this.storeGoods = categoryRes.data.data.list;
        this.showCategoryGoods = false;
      } else {
        this.showCategoryGoods = true;
      }
    },
    async clickIndex() {
      //点击店铺首页
      this.action = 0;
      this.showCategoryGoods = false;
      let goodsRes = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?current=1&pageSize=10&sort=0&storeId=${this.$route.query.storeid}`
      );
      this.storeGoods = goodsRes.data.data.list;
    },
    async clickAllGoods() {
      this.showCategoryGoods = false;
      //点击全部商品
      this.imgLight = 1;
      this.newGoodsList = null;
    },
    async clickNewGoods() {
      this.showCategoryGoods = false;
      //点击商品上新
      this.imgLight = 2;
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/newGoods?pageSize=10&current=1&storeId=${this.$route.query.storeid}`
      );
      this.newGoodsList = res.data.data.list;
    },
    clickCoupon() {
      this.imgLight = 3;
      this.showCategoryGoods = false;
    },

    //点击价格
    clickPrice() {
      if (this.sore != 3) {
        this.sore = 3;
      } else {
        this.sore = 4;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.store {
  box-sizing: border-box;
  .store-bgc {
    padding: 5rem 0;
    box-sizing: border-box;
    background-color: #000;
    .header-search-position {
      height: 40rem;

      .header-search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        height: 40rem;
        box-sizing: border-box;
        padding: 5rem 14rem 0;
        position: fixed;
        top: 0;
        left: 0;

        &.bgc {
          background-color: #fff;
        }
        img {
          width: 25rem;
          height: 25rem;
        }

        .search {
          border-radius: 20rem;
          overflow: hidden;
          background-color: #fff;
          display: flex;
          justify-content: left;
          align-items: center;
          box-sizing: border-box;
          &.border {
            border: 1rem solid #fc1c1c;
          }
          img {
            width: 18rem;
            height: 18rem;
            margin-left: 10rem;
          }

          input {
            width: 60vw;
            height: 30rem;
            border: none;
            // box-sizing: border-box;
          }
        }

        .msg {
          img {
            width: 25rem;
            height: 25rem;
          }
        }
      }
    }

    .else {
      position: absolute;
      right: 10rem;
      top: 45rem;
      ul {
        padding: 10rem;
        background-color: rgb(245, 245, 245);
        border-radius: 10rem;
        width: 113rem;
        li {
          display: flex;
          justify-content: left;
          align-items: center;
          margin-bottom: 20rem;
          svg {
            width: 20rem;
            height: 20rem;
          }
          span {
            font-size: 14rem;
            color: #2d2d2d;
            margin-left: 10rem;
          }
          &:last-child {
            margin-bottom: 10rem;
          }
        }
      }
    }

    .store-msg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rem 14rem;

      .msg-left {
        display: flex;
        align-items: center;

        img {
          width: 40rem;
          height: 40rem;
        }

        .msg-content {
          margin-left: 8rem;

          .title,
          .popularity {
            display: flex;
            align-items: center;

            span {
              font-size: 15rem;
              color: #fff;

              &:last-child {
                font-size: 12rem;
                background-color: red;
                padding: 0rem 3rem;
                border-radius: 5rem;
              }
            }

            img {
              width: 20rem;
              height: 20rem;
            }
          }

          .popularity {
            margin-top: 10rem;

            img {
              margin-right: 3rem;
            }

            span {
              font-size: 12rem;

              &:last-child {
                background-color: #000;
              }
            }
          }
        }
      }

      .msg-right {
        span {
          background: linear-gradient(-50deg, #fc1c1c, #ff6803);
          color: #fff;
          padding: 5rem 8rem;
          border-radius: 20rem;
          font-size: 13rem;
        }
        .collected {
          background: linear-gradient(-50deg, #000, #000);
          border: 2rem solid #fff;
          color: #fff;
          box-sizing: border-box;
          padding: 5rem 3rem;
        }
      }
    }
    .goods-classify {
      margin-bottom: 5rem;
      ul.list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 32rem;
            height: 32rem;
          }
          span {
            font-size: 15rem;
            color: #fff;
            margin-top: 4rem;
          }
        }
      }
    }
  }
  .goods-option {
    // background-color: #eee;

    .rank {
      color: #2d2d2d;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // margin: 10rem 0 0;
      padding: 10rem 10rem;
      box-sizing: border-box;

      width: 100vw;
      height: 40rem;
      margin-bottom: 10rem;
      &.position {
        position: fixed;
        top: 40rem;
        left: 0;
        background-color: #fff;
      }
      > ul {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        li {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 15rem;
            &.active {
              color: red;
            }
          }
          > svg {
            width: 15rem;
            height: 15rem;
            margin-left: 3rem;
          }

          &.active2 {
            color: #ddd;
            pointer-events: none;
          }
        }
      }
      .toggle {
        height: 20rem;
        padding-left: 8rem;
        border-left: 1px solid #ccc;
        svg {
          width: 20rem;
          height: 20rem;
        }
      }
    }
    .goods {
      background-color: rgb(245, 245, 245);
      > div {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
      ul.new-goods-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;

        > li {
          width: 100%;
          padding: 10rem 0;
          .title {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10rem;
            span {
              display: flex;
              width: 60rem;
              height: 1rem;
              background-color: #333;
              margin: 0 3rem;
            }
            P {
              text-align: center;
              font-size: 14rem;
              color: #2d2d2d;
              font-weight: bold;
            }
          }
          .goods-item {
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
          }
        }
      }
      .scrool-style {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        box-sizing: border-box;
        // padding: 10rem;
      }
    }
  }
  .store-action {
    position: relative;
    ul.action {
      height: 47rem;
      width: 100vw;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 25rem;
          height: 25rem;
        }
        span {
          color: #333;
          &.active {
            color: #fc2719;
          }
        }
      }
    }
  }
  .store-classift-empty {
    p {
      text-align: center;
      margin-top: 50rem;
    }
  }
  .van-list__finished-text {
    text-align: center;
  }
}
</style>